<template>
  <div>
    <h2 class="big">我是孙念梓</h2>

    <h1>{{ username }}</h1>
    <Main>hello</Main>
    <button @click="doClick">
      点击
    </button>
    <computed-demo />
    <h1>属性传递</h1>
    <prop name="hello 你好属性传递" age="1234" />
    <JsxDemo :level="4">啊快接电话卡上的卡上的将卡上的将卡上的</JsxDemo>
    <js-demo>js组件</js-demo>
    <h2>以下是插槽</h2>
    <slot-demo>
      <template v-slot:header>
        <h1>
          这是头
        </h1>
      </template>
      <template v-slot:main>
        <div>
          这是main--阿克苏加大龟甲师导航带回家爱上都敢都敢阿斯达好按格式家感受到干活
        </div>
      </template>
      <template v-slot:footer>
        <div>
          这是foot-----
        </div>
      </template>

      <template v-slot:pp="slotProps">
        props: 参数传递： {{ slotProps.user.firstName }}
      </template>

      <!-- <template v-slot:pp="{user: person}">
         ES2015 props: 参数传递： {{ person.firstName}}
      </template> -->
    </slot-demo>

    <h1>vuex-demo</h1>
    <vuex-demo></vuex-demo>
    <h3>下面是路由</h3>
    <router-main></router-main>

    <button @click="$router.push('/router/one')">路由1</button>
    <button @click="$router.push('/router/two')">路由2</button>
  </div>
</template>
<script>
import Main from "./views/main.vue";
import ComputedDemo from "./views/computed.vue";
import Prop from "./views/prop.vue";
import JsxDemo from "./views/jsxDemo.jsx";
import JsDemo from "./views/jsDemo.js";
import SlotDemo from "./views/solt.vue";
import VuexDemo from "./views/vuexDemo.vue";
import RouterMain from "./views/routerMain.vue";
export default {
  name: "App",
  components: {
    Main,
    ComputedDemo,
    Prop,
    JsxDemo,
    JsDemo,
    SlotDemo,
    VuexDemo,
    RouterMain
  },
  data() {
    return {
      username: "webpack vue 组件"
    };
  },
  methods: {
    doClick() {
      debugger;
      console.log("点击事件");
    }
  }
};
</script>

<style lang="less" scoped>
h1 {
  background-color: red;
}

.big {
  font-size: 50px;
  color: red;
  width: 300px;
  // height: 80px;
  margin: 0 auto;
  cursor: pointer;
  transition: 5s all;
  &:hover {
    font-size: 80px;
    width: 600px;
  }
}
</style>
